<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="../style/general.css" type="text/css" rel="Stylesheet">
        <link href="../style/student.css" type="text/css" rel="Stylesheet">

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

        <!-- include jQuery UI  From Google Code-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>


        <script type="text/javascript">
            $(document).ready(function(){
                $("#menu a").hover(function() {
                    $(this).stop().animate({ backgroundColor: "#4e88b2"}, 800);
                },function() {
                    $(this).stop().animate({ backgroundColor: "#504e4e" }, 800);
                });
				
            }); 
        </script>        
        <title>
            Three 2 Learn | ${pageTitle}
        </title>

        <!-- The main style sheet -->
        <link rel="stylesheet" href="/style/login.css" type="text/css" media="screen" />

        <!-- START Fx.Slide -->
        <!-- The CSS -->
        <link rel="stylesheet" href="/style/fx.slide.css" type="text/css" media="screen" />
        <!-- Mootools - the core -->
        <script type="text/javascript" src="/js/mootools-1.2-core-yc.js"></script>
        <!--Toggle effect (show/hide login form) -->
        <script type="text/javascript" src="/js/mootools-1.2-more.js"></script>
        <script type="text/javascript" src="/js/fx.slide.js"></script>
        <!-- END Fx.Slide -->

    </head>
    <body>

        <jsp:useBean id="inhoud" scope="application" class="models.Bean" />   
        <jsp:setProperty name="inhoud" property="language" value="<%= models.Bean.getLanguage()%>" />

        <!-- Login -->
        <div id="login">
            <div class="loginContent">
                <form action="../login" method="post">
                    <label for="log"><b>
                            <jsp:setProperty name="inhoud" property="key" value="Username" />
                            <jsp:getProperty name="inhoud" property="key" />    
                        </b></label>
                    <input class="field" type="text" name="userName" id="userName" value="" size="23" />
                    <label for="pwd"><b>
                            <jsp:setProperty name="inhoud" property="key" value="Password" />
                            <jsp:getProperty name="inhoud" property="key" />    
                        </b></label>
                    <input class="field" type="password" name="passWord" id="passWord" size="23" />
                    <input type="submit" name="submit" value="" class="button_login" />
                    <input type="hidden" name="redirect_to" value=""/>
                </form>
                <div class="left">
                    <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
                <div class="right">
                    <jsp:setProperty name="inhoud" property="key" value="NotAMember" />
                    <jsp:getProperty name="inhoud" property="key" /> 
                    <a href="student/register">
                        <jsp:setProperty name="inhoud" property="key" value="Register" />
                        <jsp:getProperty name="inhoud" property="key" />
                    </a> | <a href="#">
                        <jsp:setProperty name="inhoud" property="key" value="ForgotPassword" />
                        <jsp:getProperty name="inhoud" property="key" />
                    </a></div>
            </div>
            <div class="loginClose"><a href="#" id="closeLogin">
                    <jsp:setProperty name="inhoud" property="key" value="ClosePanel" />
                    <jsp:getProperty name="inhoud" property="key" />
                </a></div>
        </div> <!-- /login -->


        <div id="header">
                                    <div id="topmenu">
                                        <ul class="login">
                                            <li><img src="/style/logo32L.png"/></li>
                                            <li><a href="/language?lang=nl" title="Nederlands"><img src="/images/flags/nl.png"></a></li>
                                            <li><a href="/language?lang=en" title="English"><img src="/images/flags/uk.png"></a></li>
                                            <c:choose>
                                                <c:when test="${loggedin eq 'true'}">
                                                    <li><a href="/logout" id="toggleLogout" >
                                                            <jsp:setProperty name="inhoud" property="key" value="LogOut" />
                                                            <jsp:getProperty name="inhoud" property="key" />
                                                        </a></li>
                                                    <li><a href="/${omgeving}" >
                                                            <jsp:setProperty name="inhoud" property="key" value="BackTo" />
                                                            <jsp:getProperty name="inhoud" property="key" /> ${omgeving}
                                                            <jsp:setProperty name="inhoud" property="key" value="TheEnvironment" />
                                                            <jsp:getProperty name="inhoud" property="key" />
                                                        </a></li>
                                                    </c:when>
                                                    <c:otherwise>
                                                    <li><a href="#" id="toggleLogin" >
                                                            <jsp:setProperty name="inhoud" property="key" value="Login" />
                                                            <jsp:getProperty name="inhoud" property="key" />
                                                        </a></li>
                                                    </c:otherwise>
                                                </c:choose>                        
                                        </ul>
                                    </div>
                                    <div class="middle">
                                        <div id="menu">
                                            <ul>
                                                <li><a href="/index">
                                                        <jsp:setProperty name="inhoud" property="key" value="Homepage" />
                                                        <jsp:getProperty name="inhoud" property="key" />
                                                    </a></li>
                                                <li><a href="/courses">
                                                        <jsp:setProperty name="inhoud" property="key" value="Courses" />
                                                        <jsp:getProperty name="inhoud" property="key" />
                                                    </a></li>

                                                <li><a href="three2Learn.jsp">Three2Learn</a></li>
                                                <li><a href="information.jsp">

                                                        <jsp:setProperty name="inhoud" property="key" value="Information" />

                                                        <jsp:getProperty name="inhoud" property="key" />
                                                    </a></li>
                                                <li><a href="faq.jsp">

                                                        <jsp:setProperty name="inhoud" property="key" value="FAQ" />
                                                        <jsp:getProperty name="inhoud" property="key" />
                                                    </a></li>

                                                <li><a href="contact.jsp" class="lastItem">Contact</a></li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>

    <div id="subcontainer">
        <center>
            <h1 >
                <jsp:setProperty name="inhoud" property="key" value="Register" />
                <jsp:getProperty name="inhoud" property="key" />
            </h1>
            <a href="/"><img src="/style/icons/return.png"/></a>
            </br>
            <c:if test="${not empty melding}">
                ${melding}
            </c:if>
        </center>
        <div id="settings">
            <form name="infoform" action="" method="post">
                <table width="50%" id="settingstable" style="margin:auto">                        
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="FirstName" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td colspan="2"><input required="required"title="Enter first name" id="firstname" name="firstname" type="text" style="width:100%" /></td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="LastName" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td colspan="2"><input required="required"title="Enter last name" id="lastname" name="lastname" type="text" style="width:100%"/></td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="StreetNameNumber" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td><input required="required" title="Enter street name" id="street" name="street" type="text" style="width:100%"/></td>
                        <td><input required="required"title="Enter house number" id="number" name="number" type="text" style="width:100%"/></td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="ZipcodeCity" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td><input required="required"title="Enter zip code" id="zipcode" name="zipcode" type="text" style="width:100%"/></td>
                        <td><input required="required"title="Enter city number" id="city" name="city" type="text" style="width:100%"/></td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="Country" />
                                <jsp:getProperty name="inhoud" property="key" />
                        </td>
                        <td colspan="2">
                            <select id="country" name="country">
                                <c:forEach var="country" items="${countries}">
                                    <c:if test="${not empty country.displayCountry}">
                                        <option value="${country.displayCountry}">${country.displayCountry}</option>
                                    </c:if>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="DateOfBirth" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td colspan="2"><input required="required"title="Enter birth date" id="birthdate" name="birthdate" type="text" style="width:100%"/></td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="Gender" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td colspan="2"><select required="required" id="gender" name="gender">
                                <option value="male">
                                    <jsp:setProperty name="inhoud" property="key" value="Male" />
                                    <jsp:getProperty name="inhoud" property="key" />
                                </option>
                                <option value="female">
                                    <jsp:setProperty name="inhoud" property="key" value="Female" />
                                    <jsp:getProperty name="inhoud" property="key" />
                                </option>
                            </select></td>
                    </tr>
                    <tr>
                        <td class="darker"><b>Email</b></td>
                        <td colspan="2"><input required="required"title="Enter email" id="email" name="email" type="text" style="width:100%"/></td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="Username" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td colspan="2"><input required="required"title="Enter username" id="username" name="username" type="text" style="width:100%"/></td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="Password" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td colspan="2"><input required="required" title="Enter password" id="password" name="password" type="password" style="width:100%"/></td>
                    </tr>
                    <tr>
                        <td class="darker">
                            <b>
                                <jsp:setProperty name="inhoud" property="key" value="PhoneNumber" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </b>
                        </td>
                        <td colspan="2"><input required="required"title="Enter phone number" id="phonenumber" name="phonenumber" type="text" style="width:100%"/></td>
                    </tr>
                    <td class="darker" colspan="3"><input type="submit" value="Submit" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>
